<template>
  <section>
    <common-head title="附近信息" color="#fff" bgColor="#FFB36E"></common-head>
    <div v-for="(item,index) in datas" :key="index" @click="advertisingPush(index)">
        <span>
          <img :src="ip+item.cardPic">
        </span>
      <span>{{item.title}}</span>
    </div>
  </section>
</template>
<script>
  import commonHead from '@/components/commonHead'
  export default {
    components: {
      commonHead,
    },
    data() {
      return {
        ip: null,
        datas: null
      }
    },
    methods: {
      http: function () {
        this.datas = this.$store.state.issueContent
      },
      advertisingPush(n) {
        this.$router.push({path: '/chat/advertisingPush', query: {id: this.datas[n]}})
      },
    },
    activated() {
      this.ip = this.$store.state.ip;
      this.http()
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  section{
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
    padding-top: 1.2rem;
  > div {
    border-bottom: 1px solid #c2c2c2;
    height: 1.1rem;
>span{
  float: left;
}
  > span:nth-child(1) {
    display: inline-block;
    width: 1rem;
    height: 0.9rem;
    overflow: hidden;

  > img {
    margin-top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
  }

  }
  > span:nth-child(2) {
    display: inline-block;
    margin-left: 0.2rem;
    width: 80%;
    text-overflow:ellipsis;
    white-space: nowrap;
    height: 0.9rem;
    line-height: 1.1rem;
    font-size: 16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  }
    >div:active{
      background: #c2c2c2;
    }
  }
</style>
